import { defineComponent, ref } from "vue"

export default defineComponent({
	name: "PagerView",
	setup() {
		const total = ref(209)
		const total2 = ref(27)
		const pageSize = ref(10)
		const currentPage = ref(1)
		const currentPage2 = ref(1)
		const maxPage = ref(7)
		const onPageChange = (index: number) => {
			currentPage.value = index
		}
		const onPageChange2 = (index: number) => {
			currentPage2.value = index
		}
		return () => (
			<div class="pager-view-container">
				<h1 class="row-title">总页数total大于页面最大显示数pager-count，此时无法全部显示</h1>
				<div class="row">
					<Chen-Pager
						total={total.value}
						pageSize={pageSize.value}
						currentPage={currentPage.value}
						maxPage={maxPage.value}
						onPageChange={onPageChange}
					></Chen-Pager>
				</div>
				<h1 class="row-title">总页数total小于页面最大显示数pager-count，此时全部渲染</h1>
				<div class="row">
					<Chen-Pager
						total={total2.value}
						pageSize={pageSize.value}
						currentPage={currentPage2.value}
						maxPage={maxPage.value}
						onPageChange={onPageChange2}
					></Chen-Pager>
				</div>
				<h1 class="row-title">type传入danger，颜色发生变化</h1>
				<div class="row">
					<Chen-Pager
						total={total.value}
						pageSize={pageSize.value}
						currentPage={currentPage.value}
						maxPage={maxPage.value}
						onPageChange={onPageChange}
						type="danger"
					></Chen-Pager>
				</div>
				<h1 class="row-title">传入size-lg，按钮变大</h1>
				<div class="row">
					<Chen-Pager
						total={total.value}
						pageSize={pageSize.value}
						currentPage={currentPage.value}
						maxPage={maxPage.value}
						onPageChange={onPageChange}
						type="success"
						size="lg"
					></Chen-Pager>
				</div>
			</div>
		)
	},
})
